<template>
	<view class="goods-search">

		<view class="header-wrap">
			<u-sticky offset-top="0" h5-nav-height="0">
				<view class="search">
					 <u-search v-model="keyword" @focus="showHistory = true" :focus="showHistory" @search="onSearch" bg-color="#F4F4F4"></u-search>
				</view>
				<!-- <view v-show="!showHistory" class="header row bg-white">
					<view :class="'tag row-center ' + (comprehensive ? 'primary' : '')" @tap="onNormal">综合</view>
					<view class="tag row-center" data-type="priceSort" @tap="onPriceSort">
						<text :class="priceSort ? 'primary' : ''">价格</text>
						<view>
							<trigonometry direction="up" size="small" :color="priceSort == 'desc' ? '#FF5058' : '#333'">
							</trigonometry>
							<trigonometry size="small" :color="priceSort == 'asc' ? '#FF5058' : '#333'"></trigonometry>
						</view>
					</view>
					<view class="tag row-center" data-type="saleSort" @tap="onSaleSort">
						<text :class="saleSort ? 'primary' : ''">销量</text>
						<view>
							<trigonometry direction="up" size="small" :color="saleSort == 'desc' ? '#FF5058' : '#333'">
							</trigonometry>
							<trigonometry size="small" :color="saleSort == 'asc' ? '#FF5058' : '#333'"></trigonometry>
						</view>
					</view>
					<view class="tag row-center" @tap="changeType">
						<image class="icon-sm" :src=" goodsType === 'one' ? 'https://test.txjtapi.cn/miniapp/static/images/icon_double.png' : 'https://test.txjtapi.cn/miniapp/static/images/icon_one.png'"></image>
					</view>
				</view> -->
			</u-sticky>
		</view>
		<view v-show="showHistory" class="content bg-white">
			<view v-if="hotList.length" class="search-words">
				<view class="title">热门搜索</view>
				<view class="words row wrap">
					<view v-for="(item, index) in hotList" :key="index" class="item br60  mr20 mb20 lighter sm line1" @tap="onChangeKeyword(item)">{{item}}</view>
				</view>
			</view>
			<view v-if="historyList.length" class="search-words">
				<view class="title row-between">
					<view>历史搜索</view>
					<view class="xs muted mr20" style="padding: 10rpx 20rpx" @tap="clearSearchFun">清空</view>
				</view>
				<view class="words row wrap">
					<view v-for="(item, index) in historyList" :key="index" class="item br60  mr20 mb20 lighter sm line1" @tap="onChangeKeyword(item)">{{item}}</view>
				</view>
			</view>
		</view>
		<view v-show="!showHistory" class="content">
			<!-- <view class="goods-list">
				<view v-show="goodsType == 'double'" class="double">
					<goods-list type="double" :list="goodsList"></goods-list>
				</view>
				<view v-show="goodsType == 'one'" class="one">
					<goods-list :list="goodsList" type="one"></goods-list>
				</view>
			</view> -->
			<!-- <navigator hover-class="none" class="card row   mt50"  v-for="(item, index) in cateSearchList" :key="index" :url="`/pages/bundle/categoryList/categoryList?id=${item.id}`">
				<view class="card__info"> 
				<view class="tss_left">
					<text class="tss_left_title">-泰新布业-</text>
					<u-image width="200rpx" height="200rpx" border-radius="14rpx" :src="`https://test.txjtapi.cn/${item.image}`"></u-image>
				</view>
				<view class="flex1 ml20 mr10 tss_right">
					<view class="line2 title">{{item.name}}</view>
					<view class="muted" >
						<text class="xxs ">原价</text>  <price-format :subscriptSize="22" :firstSize="22" :secondSize="22" :price="item.price_old"></price-format>
					</view>
					<view class="primary mt10">
						<price-format :price="item.price" :subscriptSize="22" :firstSize="34" :secondSize="26"></price-format>
					</view>
					</view>
					</view>
				<view class="card__texture"></view>
			</navigator> -->
			
			<navigator hover-class="none" class=" row   mt50"  v-for="(item, index) in cateSearchList" :key="index" :url="`/pages/bundle/categoryList/categoryList?id=${item.id}`">
				<view class="card">
				<view class="cardImgBox">
					<view class="topImgText">-泰新布业-</view>
					<!-- <u-image class="cardImg" width="210rpx" height="210rpx" border-radius="14rpx" :src="`https://test.txjtapi.cn/${item.image}`"></u-image> -->
					<image class="cardImg" :src="`https://test.txjtapi.cn/${item.image}`" lazy-load='true'/>
				</view>
				<view class="cardInfoBox">
					<view class="productName">{{item.name}}</view>
					<view class="muted" >
						<text class="xxs ">原价</text>  <price-format :subscriptSize="22" :firstSize="22" :secondSize="22" :price="item.price_old"></price-format>
					</view>
					<view class="primary mt10">
						<price-format :price="item.price" :subscriptSize="22" :firstSize="34" :secondSize="26"></price-format>
					</view>
					</view>
				</view>
				<view class="card__texture"></view>
			</navigator>
			<loading-footer :status="status" :slot-empty="true">
				<view slot="empty" class="column-center" style="padding-top: 200rpx">
					<image class="img-null" src="https://test.txjtapi.cn/miniapp/static/images/goods_null.png"></image>
					<text class="lighter">暂无商品</text>
				</view>
			</loading-footer>
		</view>
	</view>
</template>

<script>
	import {
		getGoodsSearch,
		getSearchpage,
		clearSearch,
		getCateSearch
	} from '@/api/store';
	import {
		trottle,
		loadingFun,
		getRect
	} from '@/utils/tools';
	import {
		loadingType
	} from '@/utils/type';

	export default {
		
		data() {
			return {
				keyword: '',
				status: loadingType.LOADING,
				page: 1,
				goodsType: 'double',
				goodsList: [],
				priceSort: '',
				saleSort: '',
				showHistory: false,
				hotList: [],
				historyList: [],
				cateSearchList:[]
			};
		},

		components: {},
		props: ['search_word'],
		watch: {
			// 监听属性
			keyword(value, old) {
				if (!value && !this.id) {
					this.showHistory = true
				}
			},
			showHistory(value) {
				if (value) {
					this.getSearchpageFun();
				}
			}

		},
		computed: {
			comprehensive() {
				const {
					priceSort,
					saleSort
				} = this
				if (priceSort == '' && saleSort == '') {
					return true;
				}

				return false;
			}

		},




		onLoad(options) {
			this.onNormal = trottle(this.onNormal, 500, this);
			this.onPriceSort = trottle(this.onPriceSort, 500, this);
			this.onSaleSort = trottle(this.onSaleSort, 500, this);
			this.onSearch = trottle(this.onSearch, 500, this);
			this.init(options);
			if(options.search_word){
				this.keyword = options.search_word
				this.onSearch()
			}
		},


		onReachBottom: function() {
			this.getGoodsSearchFun();
		},
		methods: {
			onChange(e) {
				this.keyword = e.value
			},

			changeType() {
				this.goodsType = this.goodsType === 'one' ? 'double' : 'one'
			},

			clearSearchFun() {
				clearSearch().then(res => {
					if (res.code == 1) {
						this.getSearchpageFun();
					}
				});
			},

			onNormal() {
				this.priceSort = ''
				this.saleSort = ''
				this.onRefresh();
			},

			onPriceSort() {
				let {
					priceSort
				} = this;
				this.saleSort = ''
				this.priceSort = priceSort == 'asc' ? 'desc' : 'asc'
				this.onRefresh();
			},

			onSaleSort() {
				let {
					saleSort
				} = this;
				this.priceSort = ''
				this.saleSort = saleSort == 'desc' ? 'asc' : 'desc'
				this.onSearch();
			},

			init(option) {
				let {
					id,
					name,
					type
				} = option;
				this.type = type;
				if (id) {
					uni.setNavigationBarTitle({
						title: name
					});
					this.id = id;
					this.getGoodsSearchFun();
				} else {
					uni.setNavigationBarTitle({
						title: '搜索'
					});
					this.showHistory = true
				}
			},

			getSearchpageFun() {
				getSearchpage().then(res => {
					if (res.code == 1) {
						let {
							history_lists,
							hot_lists
						} = res.data;
						this.hotList = hot_lists
						this.historyList = history_lists
					}
				});
			},

			onClear() {
				if (this.id) {
					this.onSearch();
				}
			},
			onSearch() {
				this.onRefresh()
			},
			onRefresh() {
				this.showHistory = false
				this.page = 1
				this.goodsList = []
				this.status = loadingType.LOADING
				this.$nextTick(() => {
					// this.getGoodsSearchFun();
					this.getCateSeachFun();
				});
			},

			onChangeKeyword(item) {
				this.keyword = item
				this.showHistory = false
				this.onRefresh();
			},
			
			async getCateSeachFun(){
			const res = await getCateSearch({keyword:this.keyword})	
			this.cateSearchList = res.data
			if(res.code == 1){
				this.status = 'finished'
			}
			
			},
			async getGoodsSearchFun() {
				let {
					page,
					goodsList,
					keyword,
					priceSort,
					saleSort,
					status
				} = this;
				if (status == loadingType.FINISHED) return;
				const params = {
					category_id: this.type == 1 ? this.id : '',
					brand_id: this.type == 0 ? this.id : '',
					page_no: page,
					keyword,
					price: priceSort,
					sales_sum: saleSort
				}
				const data = await loadingFun(getGoodsSearch, page, goodsList, status, params)
				if (!data) return
				this.page = data.page
				this.goodsList = data.dataList
				this.status = data.status
			},
		}
	};
</script>
<style lang="scss">
	.goods-search {
		.header-wrap {
			.search {
				box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.03);
				position: relative;
				z-index: 1;
			}

			.header {
				height: 80rpx;

				.tag {
					height: 100%;
					flex: 1;
				}
			}
		}


		.content {
			.search-words {
				padding-left: 24rpx;
				padding-bottom: 20rpx;

				.title {
					padding: 26rpx 0;
				}

				.words {
					.item {
						line-height: 52rpx;
						height: 52rpx;
						padding: 0 24rpx;
						background-color: #F5F5F5;
					}
				}
			}

			.goods-list {
				overflow: hidden;
			}
		}
	}
	
	.mt50{
		margin-top: 50rpx;
	}
	.tss_left{
		margin-top: -50rpx;
		.tss_left_title{
			color: #f1939c;
			font-weight: 700;
			font-style: italic;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
	.tss_right{
		// display:flex;
		.title{
			background-image:-webkit-linear-gradient(top,red,#fd8403,yellow); 
			    -webkit-background-clip:text; 
			    -webkit-text-fill-color:transparent;
			font-size: 30rpx;
			font-weight: 700;
			font-style: italic;
			margin-bottom: 30rpx;
		}
		
	}
	
	// 卡片样式
	// .card,
	// .card__chip {
	//   // overflow: hidden;
	//   margin: 40rpx 50rpx;
	//   position: relative;
	//   background-color: #fffefa !important;
	// }
	
	// .card,
	// .card__chip-texture,
	// .card__texture {
	//   animation-duration: 3s;
	//   animation-timing-function: ease-in-out;
	//   animation-iteration-count: infinite;
	// }
	
	// .card {
	//   animation-name: rotate_500;
	//   background-color: var(--primary);
	//   background-image: radial-gradient(circle at 100% 0%,hsla(0,0%,100%,0.08) 29.5%,hsla(0,0%,100%,0) 30%),
	//         radial-gradient(circle at 100% 0%,hsla(0,0%,100%,0.08) 39.5%,hsla(0,0%,100%,0) 40%),
	//         radial-gradient(circle at 100% 0%,hsla(0,0%,100%,0.08) 49.5%,hsla(0,0%,100%,0) 50%);
	//   border-radius: 0.5em;
	//   // box-shadow: 0 0 0 hsl(0,0%,80%),
	//   //       0 0 0 hsl(0,0%,100%),
	//   //       -0.2rem 0 0.75rem 0 hsla(0,0%,0%,0.3);
	//   box-shadow: 6rpx 6rpx 12rpx #c5c5c5,
	//              -6rpx -6rpx 12rpx #ffffff;
	//   color: hsl(0,0%,100%);
	//   // width: 10.3em;
	//   height: 200rpx;
	//   transform: translate3d(0,0,0);
	// }
	
	// .card__info,
	// .card__chip-texture,
	// .card__texture {
	//   position: absolute;
	// }
	
	// .card__chip-texture,
	// .card__texture {
	//   animation-name: texture;
	//   top: 0;
	//   left: 0;
	//   width: 200%;
	//   height: 100%;
	// }
	
	// .card__info {
	//   font: 0.75em/1 "DM Sans", sans-serif;
	//   display: flex;
	//   align-items: center;
	//   flex-wrap: wrap;
	//   padding: 0.75rem;
	//   inset: 0;
	// }
	
	
	
	// .card__texture {
	//   animation-name: texture;
	//   background-image: linear-gradient(-80deg,hsla(0,0%,100%,0.3) 25%,hsla(0,0%,100%,0) 45%);
	// }
	 
	// /* Dark theme */
	// @media (prefers-color-scheme: dark) {
	//   :root {
	//     --bg: hsl(var(--hue),10%,30%);
	//     --fg: hsl(var(--hue),10%,90%);
	//   }
	// }
	
	// /* Animation */
	// @keyframes rotate_500 {
	//   from,
	//     to {
	//     animation-timing-function: ease-in;
	//     // box-shadow: 0 0 0 hsl(0,0%,80%),
	//     //         0.1rem 0 0 hsl(0,0%,100%),
	//     //         -0.2rem 0 0.75rem 0 hsla(0,0%,0%,0.3);
	//     transform: rotateY(-10deg);
	//   }
	
	//   25%,
	//     75% {
	//     animation-timing-function: ease-out;
	//     // box-shadow: 0 0 0 hsl(0,0%,80%),
	//     //         0 0 0 hsl(0,0%,100%),
	//     //         -0.25rem -0.05rem 1rem 0.15rem hsla(0,0%,0%,0.3);
	//     transform: rotateY(0deg);
	//   }
	
	//   50% {
	//     animation-timing-function: ease-in;
	//     // box-shadow: -0.1rem 0 0 hsl(0,0%,80%),
	//     //         0 0 0 hsl(0,0%,100%),
	//     //         -0.3rem -0.1rem 1.5rem 0.3rem hsla(0,0%,0%,0.3);
	//     transform: rotateY(10deg);
	//   }
	// }
	
	// @keyframes texture {
	//   from,
	//     to {
	//     transform: translate3d(0,0,0);
	//   }
	
	//   50% {
	//     transform: translate3d(-50%,0,0);
	//   }
	// }   
	
	
	/* 卡片 */
	.card {
	  width: 100%;
	  height: 230rpx;
	  // margin-bottom: 20rpx;
	  margin: 10rpx 50rpx 10rpx 50rpx;
	  background-color: #fff;
	  position: relative;
	  display: flex;
	  border-radius: 18rpx;
	  box-shadow: 10rpx 10rpx 10rpx #bebebe, -10rpx -10rpx 30rpx #eee;
	}
	/* 卡片图片盒子 */
	.cardImgBox {
	  width: 175rpx;
	  height: 225rpx;
	  position: absolute;
	  top: -50rpx;
	  margin: 20rpx 20rpx 0rpx 30rpx;
	  position: relative;
	  box-shadow: 10rpx 10rpx 10rpx #bebebe, -10rpx -10rpx 30rpx #eee;
	
	  border-radius: 10rpx;
	  overflow: hidden;
	}
	/* 图片上方文字 */
	.topImgText {
	  width: 175rpx;
	  height: 50rpx;
	  line-height: 50rpx;
	  font-size: 25rpx;
	  text-align: center;
	  font-style: italic;
	  font-weight: 700;
	  color: #cd7f32;
	  border-radius: 15rpx 15rpx 0 0;
	  background-color: #fff;
	}
	/* 卡片图片 */
	.cardImg {
	  width: 175rpx;
	  height: 175rpx;
	}
	/* 卡片信息盒子 */
	.cardInfoBox {
	  flex: 1;
	  height: 200rpx;
	  display: flex;
	  flex-direction: column;
	  justify-content: space-around;
	  /* background-color: #fff; */
	}
	/* 品名 */
	.productName {
	  font-weight: 400;
	}
	.category_code{
	  font-size: 30rpx;
	  color: rgb(114, 107, 107);
	}
</style>
